<html>
<head>
<title>Frontier Registry</title>
</head>
<style>
* {
	font-family: Ubuntu, Tahoma, sans
}
input {
	border-radius: 1pt;
	margin: 2pt;
	padding: 2pt;
	border: none;
	box-shadow: 0px 1px 4px 0px rgba(128,128,128,1);
}
input.account, input.hash {
	font-family: monospace, Courier;
}
input.good {
	background: #efe
}
input.bad {
	background: #fee
}
span#iscanon {
	border: 1pt solid #008;
	background: #ddf;
	border-radius: 2pt;
	margin: 2pt;
	padding: 2pt;
	font-size: x-small;
	font-family: Tahoma, sans
}
span.ok {
	border: 1pt solid #080;
	background: #dfd;
	border-radius: 2pt;
	margin: 2pt;
	padding: 2pt;
	font-size: x-small;
	font-family: Tahoma, sans
}
span.error {
	border: 1pt solid #800;
	background: #fdd;
	border-radius: 2pt;
	margin: 2pt;
	padding: 2pt;
	font-size: x-small;
	font-family: Ubuntu, Tahoma, sans
}
input#name {
	margin: 1em 1em 1em 1em;
	font-size: large;
	font-weight: bold;
	font-family: Ubuntu, Tahoma, sans
}
</style>
<body>

<div id="nameaction">
<input id="name" value="" placeholder="e.g. Gavin Wood"/>
<span id="short" class="error">name too short</span>
<span id="notours" class="error">name already reserved</span>

<div id="owned">
Owner: <input id="owner" readOnly="1" class="account ro"/> <span id="iscanon">canonical</span> <span id="ownedtag" class="ok">yours</span>
</div>

<div id="free">
With account: <input id="from" class="account owned" value="XE930WWR03ZUUB03QR0NPY442HQYHLHEG3"/><button id="reserve">Reserve</button>
</div>

<div id="ours">
<div>Address: <input id="address" class="account" placeholder="e.g. XE930WWR03ZUUB03QR0NPY442HQYHLHEG3"/><button id="setaddress">Set</button><button id="setprimary">Set Canonical</button></div>
<div>Subregistrar: <input id="sub" class="account" placeholder="e.g. XE032ELZGPENJL7T92OW2EF342PX3PY3Y4T"/><button id="setsub">Set</button></div>
<div>Content: <input id="content" class="hash" placeholder="e.g. 56e81f171bcc55a6ff8345e692c0f86e5b48e01b996cadc001622fb5e363b421"/><button id="setcontent">Set</button></div>
<div>Transfer: <input id="transferto" class="account" placeholder="e.g. XE930WWR03ZUUB03QR0NPY442HQYHLHEG3"/><button id="transfer">Transfer</button></div>
<div>Refund: <input id="refundto" class="account" placeholder="e.g. XE930WWR03ZUUB03QR0NPY442HQYHLHEG3"/><button id="disown">Disown</button></div>
</div>

</div>

<div id="log">
</div>
<script>
web3;
web3.eth.defaultBlock = "pending";

var FixedFeeRegistrar = web3.eth.contract([{"constant":true,"inputs":[{"name":"_owner","type":"address"}],"name":"name","outputs":[{"name":"o_name","type":"string"}],"type":"function"},{"constant":false,"inputs":[{"name":"_name","type":"string"},{"name":"_newOwner","type":"address"}],"name":"setOwner","outputs":[],"type":"function"},{"constant":false,"inputs":[{"name":"_name","type":"string"},{"name":"_a","type":"address"}],"name":"setAddr","outputs":[],"type":"function"},{"constant":true,"inputs":[{"name":"_name","type":"string"}],"name":"addr","outputs":[{"name":"","type":"address"}],"type":"function"},{"constant":true,"inputs":[{"name":"_name","type":"string"}],"name":"subRegistrar","outputs":[{"name":"","type":"address"}],"type":"function"},{"constant":false,"inputs":[{"name":"_name","type":"string"}],"name":"reserve","outputs":[],"type":"function"},{"constant":false,"inputs":[{"name":"_name","type":"string"},{"name":"_refund","type":"address"}],"name":"disown","outputs":[],"type":"function"},{"constant":false,"inputs":[{"name":"_name","type":"string"}],"name":"setName","outputs":[],"type":"function"},{"constant":false,"inputs":[{"name":"_name","type":"string"},{"name":"_registrar","type":"address"}],"name":"setSubRegistrar","outputs":[],"type":"function"},{"constant":true,"inputs":[{"name":"_name","type":"string"}],"name":"content","outputs":[{"name":"","type":"bytes32"}],"type":"function"},{"constant":true,"inputs":[{"name":"_name","type":"string"}],"name":"owner","outputs":[{"name":"","type":"address"}],"type":"function"},{"constant":true,"inputs":[{"name":"_name","type":"string"}],"name":"record","outputs":[{"name":"o_addr","type":"address"},{"name":"o_subRegistrar","type":"address"},{"name":"o_content","type":"bytes32"},{"name":"o_owner","type":"address"}],"type":"function"},{"constant":false,"inputs":[{"name":"_name","type":"string"},{"name":"_content","type":"bytes32"}],"name":"setContent","outputs":[],"type":"function"},{"anonymous":false,"inputs":[{"indexed":true,"name":"name","type":"string"}],"name":"Changed","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"addr","type":"address"},{"indexed":true,"name":"name","type":"string"}],"name":"ReverseChanged","type":"event"}]);
var theReg = FixedFeeRegistrar.at("0x5e70c0bbcd5636e0f9f9316e9f8633feb64d4050");
var price = 5000000000000000000;
var $ = function(_s) { return document.getElementById(_s); }
var $log = function(_s) { $('log').innerHTML += "<div>" + _s + "</div>"; }


var isZero = function(_s) { return /^(0x)?0*$/.exec(_s) != null; }
var subZero = function(_s, _d) { return isZero(_s) ? _d : _s; }

function reserve() {
	theReg.reserve.sendTransaction($('name').value/*.toLowerCase()*/, {from: $('from').value, value: price});
}

function isICAP(_t) {
	return /^XE\d\d[A-Z0-9]+$/.exec(_t) != null && _t.length >= 34 && _t.length <= 35;
}
function toRawAddress(_i) {
	// TODO
	return _i;
}

function spruce(_i) { return _i.substr(0, 2) == '0x' ? _i : ('0x' + _i); }
function spruceAddress(_i) { return (isICAP(_i) || _i.substr(0, 2) == '0x') ? _i : ('0x' + _i); }

function isGood(_i, _t) {
	if (_t == 'address')
		return isICAP(_i) || web3.isAddress(_i);
	else if (_t == 'owned')
	{
		var a = toRawAddress(_i);
		var as = web3.eth.accounts;
		for (var i in as)
			if (as[i] == _i)
				return true;
		false;
	}
	else if (_t == 'data')
		return web3.toHex(web3.toAscii(spruce(_i))) == spruce(_i);
	return false;
}

function updateGoodness(_i, _t) {
	var g = isGood(_i.value, _t);
	_i.classList.remove('bad');
	_i.classList.remove('good');
	if (_i.value.length)
		_i.classList.add(g ? 'good' : 'bad');
	return g;
}

function enableIfGood(_b, _i, _t) {
	(_i.onkeyup = _i.onchange = function() {
		_b.disabled = !updateGoodness(_i, _t);
	})();
}

function updatenameaction() {
	var n = $('name').value/*.toLowerCase()*/;
	var reserved = false;
	var ours = false;
	var short = n.length < 9;
	var owner;
	var canon;
	if (!short)
	{
		owner = theReg.owner(n);
		reserved = !isZero(owner);
		if (reserved)
		{
			for (var i in web3.eth.accounts)
				if (web3.eth.accounts[i] == owner)
					ours = true;
//			$log(theReg.name(owner));
			canon = (theReg.name(owner) == n);
		}
	}

	$('short').style.display = short && n.length ? null : 'none';
	$('free').style.display = (!short && !reserved) ? null : 'none';
	$('notours').style.display = (!short && reserved && !ours) ? null : 'none';
	$('owned').style.display = $('ownedtag').style.display = reserved ? null : 'none';
	$('ours').style.display = ours ? null : 'none';
	$('iscanon').style.display = canon ? null : 'none';
	$('owner').value = owner;

	if (ours)
	{
		$('address').value = subZero(theReg.addr(n), '');
		$('sub').value = subZero(theReg.subRegistrar(n), '');
		$('content').value = subZero(theReg.content(n), '');
		$('transferto').value = '';
		
		$('setaddress').onclick = function() { theReg.setAddr.sendTransaction(n, spruce($('address').value), {from: owner}); };
		$('setcontent').onclick = function() { theReg.setContent.sendTransaction(n, spruce($('content').value), {from: owner}); };
		$('setsub').onclick = function() { theReg.setSubRegistrar.sendTransaction(n, spruce($('sub').value), {from: owner}); };
		$('transfer').onclick = function() {
			theReg.transfer.sendTransaction(n, spruceAddress($('transferto').value), {from: owner});
			updatenameaction();
		};
		$('setprimary').onclick = function() {
			var a = toRawAddress($('address').value);
			if (owner != a)
				theReg.setAddr.sendTransaction(n, a, {from: owner});
			theReg.setName.sendTransaction(n, {from: a});
		};
		$('disown').onclick = function() { theReg.disown.sendTransaction(n, spruceAddress($('refundto').value), {from: owner}); };
		enableIfGood($('setcontent'), $('content'), 'data');
		enableIfGood($('setsub'), $('sub'), 'address');
		enableIfGood($('transfer'), $('transferto'), 'address');
		($('address').onkeyup = $('address').onchange = function() {
			$('setprimary').disabled = !updateGoodness($('address'), 'owned');
			$('setaddress').disabled = !updateGoodness($('address'), 'address');
		})();
		enableIfGood($('disown'), $('refundto'), 'address');
	}
}

$('reserve').onclick = reserve;
($('name').onkeyup = $('name').onchanged = function() { updatenameaction(); })();
($('from').onkeyup = $('from').onkeyup = function() {
	var g = updateGoodness($('from'), 'address');
	$('reserve').disabled = !g;
})()

/*if (e.keyCode == 46 || e.keyCode == 8)*/
/*
theWallet.ConfirmationNeeded(function(error, result) {
	console.log("CONFIRMATION NEEDED:" + JSON.stringify(result));
	last = result.args.operation;
	h = '<button id="confirmPending" onClick="' + "theWallet.confirm.sendTransaction('" + result.args.operation + "', {from: spruce(document.getElementById('from').value)})" + '">Confirm ' + result.args.operation + '</button>';
	document.getElementById("pending").innerHTML = h;
});

theWallet.MultiTransact(function(error, result) {
	console.log("TXDONE:" + JSON.stringify(result));
	if (last == result.args.operation)
	{
		document.getElementById("pending").innerHTML = "";
		last = null;
	}
});

theWallet.Confirmation(function(error, result) {
	console.log("CONFIRM:" + JSON.stringify(result));
	if (last == result.args.operation)
	{
		h = '<div>by ' + result.args.owner + "</div>";
		document.getElementById("pending").innerHTML += h;
		if (spruce(result.args.owner) == spruce(document.getElementById("from").value))
			document.getElementById("confirmPending").disabled += true;
	}
});
*/
</script>
</body>
</html>

